シェアが増えると有益情報も増える不思議なサイトです

当サイトのSimplicityのCSSカスタマイズ解説

当サイトではWordPressテーマのSimplicityを使用しています。

そこで初心者向けにこのSimplicityのカスタマイズ方法を簡単に解説します。

お知らせ
プライムが無料で使えます
トップページをリニューアルしました

全体像

面倒くさい人はコピペすればとりあえずほぼ当サイトのようなデザインになります。

WordPressのダッシュボード
→外観
→テーマの編集
→「編集するテーマを選択」Simplicity2 Child <重要>
→スタイルシート(style.css)
でCSSを編集します。

必ず子テーマのCSSを編集してください。

とりあえず当サイトのCSS全体を載せます。

copy

使い方解説

基本的にレイアウトそのものに関しては上記をコピペするだけでOKです。

文章等の装飾に関しては、実際に文章を書く時に指定してあげる必要があります。

初心者向けに簡単に説明します。

toukou
記事を書く時は

「投稿」
→「新規追加」
「テキスト」

から書きましょう。

「b」とか「i」とかたくさんボタンがありますが、これはAddQuicktagというプラグインです。

登録しておいた文字列をボタンひとつで入力できるので是非使いましょう。

ふきだしの使い方

たとえば
「テキスト」に以下のように入力します。

copy

するとこのように表示されます。

テスト

他のふきだしも同様にhukidashioの部分を書き換えればOKです。

AddQuicktagには
copy

を登録しておくと便利です。

以下同様に、入力例を説明していきます。

リストの使い方

copy

このように入力すると

と表示されます。

AddQuicktagには
copy

を登録しておくとよいでしょう。

 
 

copy

このように入力すると、

と表示されます。

AddQuicktagには
copy

を登録しておくとよいでしょう。

その他のリストの使い方も同様です。

アフィリエイトリンクの改行をしなくする

デフォルトだとアフィリエイトリンクが勝手に改行されてしまいます。

そのため、以下のように記述します。

copy

これで、WordPressで投稿→テキストから以下のように入力します。

copy

いちいち入力するのは面倒なのでAddQuicktagなどのプラグインに登録しておくとよいでしょう。

一応余分な改行の削除やこういったCSSでの加工は規約違反ではありませんが、万が一これでカウントされない不具合があった場合にはサポート対象外のようです。

※実際リンクによってはカウントされないことがありました。

それにしても、リンク改変がNGなのになぜ余分な改行等を最初から排除したリンクを配らないのか疑問です。

フォントを灰色にして見やすくする

純粋に文字色が真っ黒だと読みづらいことがあります。

特にモバイルだと読みづらくなるように感じます。

そこで文字色を若干灰色にします。

copy

これだけでOK。

こうすることで、太字や赤字がより目立ちやすくなる効果もあるでしょう。

今アレが安い?タイムセールチラ見

CSSカスタマイズまとめ

上記以外の項目の詳しい解説については以下のページも参考にしてください。

質問等ありましたら答えられる範囲でお答えします。

このサイトで行っているカスタマイズであれば答えられるかもしれません。

(私は自分がサイト運営する上で必要な知識しか持ち合わせていません。)

Simplicityでレスポンシブ2段カラムをカスタマイズする
Simplicityでレスポンシブ2段カラムをカスタマイズする
WordPressテーマSimplicityで2段カラムをカスタマイズします。 ...続きはタップ
Simplicityでパンくずリストをカスタマイズする方法
Simplicityでパンくずリストをカスタマイズする方法
WordPressテーマSimplicityでパンくずリストをカスタマイズします...続きはタップ
Simplicityでsp-info、sp-warning等をカスタマイズして枠をつける
Simplicityでsp-info、sp-warning等をカスタマイズして枠をつける
WordPressテーマSimplicityで、sp-info sp-...続きはタップ
Simplicityのブログカードをカスタマイズする-色とモバイル表示
Simplicityのブログカードをカスタマイズする-色とモバイル表示
WordPressテーマSimplicityでブログカードをカスタマイズします。...続きはタップ

phpカスタマイズ

CSS以外の部分の「テーマの編集」でいじった部分を簡単に書きます。

breadcrumbs.php

パンくずリストのphpです。

copy

だいぶ前に書き込んだものだと思うのでなぜこれを入れたかは覚えていません。

もしかしたら最初から記載されている内容かもしれません。

テーマのための関数 (functions.php)

copy

これが書いてあります。

BBpressという掲示板を作るプラグインを使っている場合に、メールの入力なしで投稿できるようにする設定だったと思います。

BBpressを使っていない人は必要のない設定です。

header-insert.php

copy

これが書いてあります。

これについてはサイト表示を高速化するためにコピペしました。

詳細は以下のページをご覧ください。
http://kasegunet.jp/improve-pagespeed/

before-main.php

copy

ページ内リンクのスムーススクロールを実現するためのもの。

出典http://wispyon.com/smoothscroll-internal

実装しても重くならなかったのでいれています。

使っているプラグイン一覧

もしかすると使っているプラグインによって何か変わるかもしれないので念のため記載しておきます。

  1. AddQuicktag
  2. All In One SEO Pack
  3. Autoptimize
  4. BackWPup
  5. bbPress
  6. bbPress New Topics
  7. Better Delete Revision
  8. Broken Link Checker
  9. Contact Form 7
  10. Contact Form DB
  11. Crayon Syntax Highlighter
  12. Disable Emojis
  13. EWWW Image Optimizer
  14. Head Cleaner
  15. Lazy Load※不要、不具合の原因になっていた
  16. Login LockDown
  17. NextScripts: Social Networks Auto-Poster
  18. No Category Base (WPML)
  19. Post List Generator
  20. PubSubHubbub
  21. Really Simple CAPTCHA
  22. Revive Old Post (Former Tweet Old Post)
  23. Search Regex
  24. ShowID for Post/Page/Category/Tag/Comment
  25. Table of Contents Plus
  26. TablePress
  27. W3 Total Cache
  28. What’s New Generator
  29. WordPress Popular Posts
  30. WP Hyper Response
  31. WP-CopyProtect [Protect your blog posts]

これら全31種を現在有効化しています。

追記:Head Cleanerは不具合が出たため現在停止中

追記2:Head Cleanerは設定を変え復活させました。

↓フォローしとく?LINE@でお得な情報ゲット!